import React from 'react'
import '../../styles/myJump/condition.css'
import { getVideo } from '../../api/mp3'
import axios from 'axios'
import Axios from 'axios';
axios.default.widthCredentials = true
class Video extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [],
            vid: ''
        }
    }

    componentDidMount() {
        let uid = localStorage.getItem('token')
        // /user/event?uid=32953014
        Axios.get('http://localhost:4000/user/event?uid=' + uid)
            .then(res => {
                // console.log(res)
                this.setState({
                    data: res.data.events,
                })
            })
    }

    render() {
        let { data } = this.state
        return (
            <div>
                {data.map((item, i) => {
                    // console.log(item, i)
                    let duration = JSON.parse(item.json)
                    if (duration.video) {
                        getVideo(duration.video.videoId)
                            // Axios.get('http://localhost:4000/video/url?id=' + duration.video.videoId)
                            .then(res => {
                                // console.log(res.data.urls[0].url)
                                let vid = res.data.urls[0].url
                                this.setState({ vid: vid })
                            })
                    }
                    return (
                        <div key={i}>
                            {duration.video ? <div>
                                <div className='own-dynamics clearfix'>
                                    <div>
                                        <video
                                            className='own-dynamics-video'
                                            controls="controls"
                                            name="media"
                                            src={this.state.vid}
                                            type="video/mp4"
                                        >
                                        </video>
                                    </div>
                                </div>

                            </div> : ''}
                        </div>
                    )
                })}

            </div>
        )

    }

}

export default Video